<template>
	<view class="page user">
		<view class="user-header">
			<view class="user-banner">
				<image src="../../static/user-bg2.png" mode=""></image>
			</view>
			<view class="user-info">
				<view class="user-info-profile">
					<image class="profile" src="../../static/user.png"></image>
				</view>
				<view class="user-info-name" v-if="isLogin">
					<view class="name" @click="handleToPage">
						<text>{{ userInfo.real_name || '未实名' }}</text>
						<image v-if="userInfo.certification" src="../../static/icon/attestation-icon.png"></image>
					</view>
					<view class="reputation">疫情防控人人有责</view>
				</view>
				<view class="user-info-login" v-else @click="handleToLogin">立即登录</view>
				<view class="user-info-code" @click="handleToCode">
					<image class="icon" src="../../static/icon/qrcode-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="user-tools">
			<view class="user-tools-item">
				<image src="../../static/icon/grains-icon.png"></image>
				<text class="title">米粒</text>
				<view class="number">
					<text class="value">{{ userAsset.integral }}</text>
					粒未使用
				</view>
			</view>
			<view class="user-tools-item">
				<image src="../../static/icon/coupon-icon.png"></image>
				<text class="title">优惠券</text>
				<view class="number">
					<text class="value">{{ userAsset.coupon }}</text>
					张未使用
				</view>
			</view>
			<view class="user-tools-item">
				<image src="../../static/icon/wallet-icon.png"></image>
				<text class="title">金币</text>
				<view class="number">
					余额
					<text class="value">{{ userAsset.wallet }}</text>
					金币
				</view>
			</view>
		</view>
		<view class="user-call">
			<view class="user-call-item" v-for="(item, index) in callArray" :key="index" @click="goPage(item)">
				<view class="title">
					<image class="icon" :src="item.icon"></image>
					<view class="text">{{ item.label }}</view>
				</view>
				<view class="link">
					<image class="icon" src="../../static/icon/link-right-icon.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userAsset: {
					integral: 0,
					coupon: 0,
					wallet: 0
				},
				callArray: [{
						label: '企业管理',
						icon: '/static/icon/enterprise-icon2.png',
						url: '/pages/company/index'
					},
					{
						label: '米需',
						icon: '/static/icon/demand-icon2.png',
						url: '/pages/empty/empty'
					},
					{
						label: '米供',
						icon: '/static/icon/provide-icon2.png',
						url: '/pages/empty/empty'
					},
					{
						label: '访客二维码',
						icon: '/static/icon/visitor-icon2.png',
						url: '/pages/visitor/visitor'
					},
					{
						label: '设置',
						icon: '/static/icon/seting-icon2.png',
						url: '/pages/user/user'
					},
					{
						label: '关于',
						icon: '/static/icon/about-icon2.png',
						url: '/pages/about/about'
					},
					{
						label: '退出登录',
						icon: '/static/icon/logout-icon2.png',
						url: 'logout'
					}
				]
			};
		},
		computed: {
			isLogin() {
				if (this.$store.state.token) {
					return true;
				} else {
					return false;
				}
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		methods: {
			handleLogout() {
				this.$store.dispatch('logout');
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			/**
			 * 跳转用户中心
			 */
			handleToPage() {
				uni.navigateTo({
					url: '/pages/user/user'
				});
			},
			/**
			 * 跳转到一码通
			 */
			handleToCode() {
				uni.switchTab({
					url: '/pages/qrcode/qrcode'
				});
			},
			/**
			 * 处理小程序登录
			 */
			handleToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			goPage(item) {
				if (item.url === 'logout') {
					this.handleLogout();
				} else {
					if (this.isLogin) {
						this.$route(item.url)
					} else {
						this.handleToLogin()
					}
				}

			}
		}
	};
</script>

<style lang="scss">
	.page.user {
		width: 750rpx;
		overflow: hidden;
		position: relative;

		.user-header {
			left: 0;
			top: -200rpx;
			position: relative;
			z-index: 1;
			width: 1500rpx;
			margin-left: -375rpx;
			height: 700rpx;
			overflow: hidden;
			border-radius: 45%;
			background: linear-gradient(185.62deg, rgba(114, 163, 247, 1) 0%, rgba(16, 96, 235, 1) 100%);
			display: flex;
			align-items: center; //垂直居中
			justify-content: center; //水平居中
		}

		.user-banner {
			position: absolute;
			width: 750rpx;
			height: 420rpx;
			button: 0rpx;
			left: 50%;
			margin-left: -375rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-info {
			position: relative;
			z-index: 10;
			display: flex;
			width: 690rpx;
			align-items: center; //垂直居中
			justify-content: center; //水平居中
			margin: 60rpx;
			padding-top: 156rpx;

			.user-info-profile {
				width: 150rpx;
				height: 150rpx;
				border: 6rpx solid #ffffff;
				border-radius: 50%; //圆角
				overflow: hidden;

				.profile {
					width: 100%;
					height: 100%;
				}
			}

			.user-info-login {
				flex: 1;
				height: 150rpx;
				line-height: 150rpx;
				padding-left: 50rpx;
				font-size: 40rpx;
				color: #cccccc;
				font-weight: 400;
			}

			.user-info-name {
				flex: 1;
				height: 150rpx;
				padding-left: 20rpx;
				padding-top: 20rpx;

				.name {
					display: flex;
					align-items: center; //垂直居中
					justify-content: flex-start; //水平居左

					text {
						font-size: 45rpx;
						color: #ffffff;
						font-weight: 600;
					}

					image {
						width: 100rpx;
						height: 35rpx;
						margin-left: 15rpx;
					}
				}
			}

			.reputation {
				font-size: 24rpx;
				color: #ffffff;
				margin-top: 20rpx;
			}

			.user-info-code {
				width: 80rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.user-tools {
			position: relative;
			z-index: 10;
			box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 3%);
			border-radius: 15rpx; //圆角
			background-color: #ffffff;
			width: 690rpx;
			height: 180rpx;
			margin: 0 30rpx;
			margin-top: -350rpx;

			display: flex;
			align-items: center; //垂直居中
			justify-content: center; //水平居中

			.user-tools-item {
				flex: 1;
				text-align: center;
				position: relative;

				image {
					position: absolute;
					display: block;
					width: 120rpx;
					height: 120rpx;
					z-index: -1;
					left: 50%;
					margin-left: -60rpx;
				}

				.title {
					font-size: 38rpx;
					font-weight: 400;
				}

				.number {
					font-size: 26rpx;
				}

				.value {
					font-size: 38rpx;
					color: red;
					padding: 0 5rpx;
				}
			}
		}

		.user-call {
			margin: 30rpx;
			margin-top: 40rpx;
			box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 3%);
			border-radius: 15rpx; //圆角
			overflow: hidden;
			background-color: #ffffff;

			.user-call-item {
				display: flex;
				align-items: center; //垂直居中
				justify-content: space-between; //两端对齐
				margin: 0 30rpx;
				height: 100rpx;

				.title {
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					align-items: center; //垂直居中
					justify-content: flex-start; //水平居中

					.icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}
				}

				.link {
					width: 23rpx;
					height: 37rpx;

					.icon {
						width: 100%;
						height: 100%;
					}
				}
			}

			.user-call-item+.user-call-item {
				border-top: 1px solid #d8d8d8;
			}
		}
	}
</style>
